import * as PIXI from 'pixi.js'
import useMainStore from '@/store/modules/useMainStore'
import { useWindowSize } from '@vueuse/core'
import { creationMouseDown } from '@/utils/events'
import { setColorMatrix } from '@/store/modules/useFilterStroe'
import { setPixi } from '@/store/modules/usePixiStore'
import useDiyStore from '@/store/modules/useDiyStore'

export default async () => {
  const mainStore = useMainStore()
  const diyStore = useDiyStore()
  const { scale } = mainStore.getAppAttr
  const { width, height } = useWindowSize()
  const container = new PIXI.Container({
    visible: diyStore.visible,
  })
  const bundle = await PIXI.Assets.loadBundle('cardBook')
  const sprite = new PIXI.Sprite(
    new PIXI.Texture({
      source: new PIXI.Texture(bundle.yellow).source,
    }),
  )
  sprite.anchor.set(0.5)
  container.addChild(sprite)
  container.position.set((width.value / scale) * 0.05, height.value / scale / 4)
  const textContainer = new PIXI.Container()
  // 按钮文字
  '创作'.split('').forEach((item, index, arr) => {
    const text = new PIXI.Text({
      text: item,
      alpha: 0.8,
      style: {
        fontFamily: 'RZFont',
        fontSize: 40,
        fill: 0xffffff,
        align: 'center',
        dropShadow: {
          alpha: 0.55,
          distance: 3,
        },
        stroke: {
          color: 0xff0000,
          width: 1,
          alignment: 0.5,
        },
      },
    })
    text.anchor.set(0.5)
    text.position.set(2, (2 * index - arr.length + 1) * 20)
    textContainer.addChild(text)
  })
  container.addChild(textContainer)
  const colorMatrix = new PIXI.ColorMatrixFilter()
  container.filters = [colorMatrix]
  creationMouseDown.whiteAdd(container)
  setPixi('creation', container)
  setColorMatrix('creation', [colorMatrix])
  return container
}
